<template>
    <div id="leftnav">
        <el-menu 
        :default-active="activeMenu" 
        active-text-color="rgb(77, 112, 255)" class="el-menu-vertical-demo" text-color="#fff"
        :collapse="$store.iscollapse" :default-openeds="defaultOpen" >
            <div v-show="!$store.iscollapse" style="padding-top:10px; min-width: 200px;text-align: center;">
                <img style=" margin: 0 auto; padding-top: 5px; " src="/img/bm_logo.png" />
            </div>
            <div v-show="$store.iscollapse" style="padding-top:10px;text-align: center;height: 60px;">
                <img style=" margin: 0 auto; padding-top: 5px;width: 30px; " src="/img/bm_logo.png" />
            </div>
            <template v-for="item in menulist" :key="item.id">
                <template v-if="!item.children">
                    <el-menu-item @click="menuclick(item)" :index="item.route" v-show="item.show" >
                        <el-icon v-if="item.ico">
                            <component :is="item.ico" v-if="item.ico"></component>
                        </el-icon>
                        <span slot="title">{{ item.name }}</span>
                    </el-menu-item> 
                </template>
                <el-sub-menu v-if="item.children" :index="item.id">
                    <template #title>
                        <el-icon v-if="item.ico">
                            <component :is="item.ico" v-if="item.ico" />
                        </el-icon>
                        <span style="font-size: 16px;">{{ item.name }}</span>
                    </template>
                    <el-menu-item-group v-for='child in item.children' :key='child.id'>
                        <el-menu-item @click="menuclick(child)"  :index="child.route" >
                            <div style="width: 10px;"></div>
                            <img :src="'./'+child.url" style="margin-right: 10px;" alt="">
                            <span style="font-size: 16px;" slot="title">{{ child.name }}</span>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>

<script setup>
import { ref, onMounted,watch } from 'vue';
import { mainStore } from "../store/index";
import { House, Setting } from '@element-plus/icons-vue';
import { ElMessageBox } from "element-plus";
import { useRouter,useRoute } from "vue-router";
const $route = useRoute();
const $router = useRouter();
const $store = mainStore();
const defaultOpen=ref(['1','2']);
let activeMenu=ref('Gis');
watch(()=>$route.name,(ov,nv)=>{
    activeMenu.value=$route.name;
})
onMounted(() => {
    activeMenu.value=$route.name;
})
function menuclick(e) {
    if (e.route == 'logout') {
        ElMessageBox.confirm(
            '是否确定？',
            '系统提醒',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            $router.push({
                name: 'login'
            })
            localStorage.removeItem('token');
        })
    } else {
        $router.push({
            name: e.route
        })
    }
}
const menulist = ref([
    {
        id: '1',
        name: '管理中心',
        ico: House,
        children: [
            {
                id: '1-2',
                name: "用户管理",
                route: 'user',
                url:'./img/ico01_01.png'
            },
            // {
            //     id: '1-3',
            //     name: "角色管理",
            //     route: 'role',
            //     url:'/img/ico01_03.png'
            // },
            {
                id: '1-7',
                name: "部门管理",
                route: 'dept',
                url:'./img/ico01_07.png'
            },
            {
                id: '1-9',
                name: "角色管理",
                route: 'role',
                url:'./img/ico01_09.png'
            },
            // {
            //     id: '1-8',
            //     name: "个人信息",
            //     route: 'UserMsg',
            //     url:'/img/ico01_08.png'
            // },
            
        ],
    },
    {
        id: '2',
        name: '系统设置',
        ico: Setting,
        children: [
            {
                id: '2-1',
                name: "修改密码",
                route: 'changePWD',
                url:'./img/ico02_01.png'
            },
            {
                id: '2-2',
                name: "退出系统",
                route: 'logout',
                url:'./img/ico02_02.png'
            }
        ]
    }
])
</script>
<style lang="less">
#leftnav {
    height: 100%;

    .el-sub-menu__title:hover {
        background-color: #304155 !important;

    }
}

.el-menu-item-group__title {
    display: none;
}

.el-menu--popup {
    padding: 0px;
}
</style>
<style scoped>
.lwlftnav .el-menu-demo .logoimg {
    width: 100%;
    transform: translate(0px, -20px);
}

.el-menu {
    height: 100%;
    background: #304155;
    border-right: none;

}

style attribute {
    --el-menu-bg-color: #409eff;
}

.el-menu-item {
    background: #202D3E;
    color: #fff;
}

.el-menu-item.is-active {
    background: #4079c8;
    color: #fff;
}

.el-sub-menu .el-icon {
    color: #fff;
}

.el-sub-menu__title * {
    color: #fff;
}


</style>
